<template>
  <div id="ContactUs">
    <div class="banner container-fuild text-center" :style="{ backgroundImage: `url(${titleImg})` }">
      {{ titleContent }}
    </div>
    <div class="container">
      <div class="container-fuild ContactUs-container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-6">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10 col-xs-12">
                  <input type="text" class="form-control" id="name" placeholder="请输入名字" v-model="nameVal" />
                </div>
              </div>
              <div class="form-group">
                <label for="tel" class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="tel" placeholder="请输入电话" v-model="phoneVal" />
                </div>
              </div>
              <div class="form-group">
                <label for="content" class="col-sm-2 control-label">内容</label>
                <div class="col-sm-10">
                  <textarea class="form-control" id="content" rows="8" placeholder="请输入内容"
                    v-model="controlVal"></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <!-- <button class="btn btn-default btn-block">
                    提交
                  </button> -->
                  <button class="btn btn-default btn-block" @click.stop="submitForm">
                    提交
                  </button>
                </div>
              </div>
            </form>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            <div id="map" class="wow zoomIn"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="ContactUs">
import WOW from 'wow.js'
import { ref, onMounted } from 'vue'
import axios from '../utils/axios';
import { data } from 'jquery';
import axios2 from 'axios'
// 百度地图BMap构造函数
let BMap = null
let nameVal = ''
let phoneVal = ''
let controlVal = ''
const saveURL = 'https://test.dingsing-medical.com/web/api/leave/word/save';


let titleContent = ref(null);
let titleImg = ref(null);

const getData = async () => {
  const res = await axios.get('/gwht/gw/lxwm/getInfo');
  if (res.code === 200) {
    titleContent.value = res.data.titleContent;
    titleImg.value = res.data.titleImg;

    // console.log(titleContent, 'titleContent==');
    getMap(res.data);
  }
}

function getMap(data) {
  // console.log(data.companyCoordinates);
  const str = data.companyCoordinates;
  const [lat, lng] = str.split(",").map(Number);

  BMap = window.BMap;
  var map = new BMap.Map('map') // 创建地图实例
  var point = new BMap.Point(lat, lng) // 创建点坐标
  map.centerAndZoom(point, data.mapLevel) // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  var marker = new BMap.Marker(point) // 创建标注
  map.addOverlay(marker) // 将标注添加到地图中
  var opts = {
    width: data.mapDtwidth, // 信息窗口宽度
    height: data.mapDtheight, // 信息窗口高度
    title: data.companyName // 信息窗口标题
  }
  var infoWindow = new BMap.InfoWindow(
    `<span>地址：${data.companyAddress}<span>
     <br>
     <span>联系方式：${data.companyPhone}</span>`,
    opts
  ) // 创建信息窗口对象
  map.openInfoWindow(infoWindow, map.getCenter()) // 打开信息窗口

  // 原数据
  /* BMap = window.BMap
  var map = new BMap.Map('map') // 创建地图实例
  var point = new BMap.Point(113.44157, 23.18394) // 创建点坐标
  map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  var marker = new BMap.Marker(point) // 创建标注
  map.addOverlay(marker) // 将标注添加到地图中
  var opts = {
    width: 60, // 信息窗口宽度
    height: 10, // 信息窗口高度
    title: '广州鼎盛医疗技术服务有限公司' // 信息窗口标题
  }
  var infoWindow = new BMap.InfoWindow(
    `<span>地址：黄埔区神舟路288号C栋102<span>
     <br>
     <span>联系方式：13676208186</span>`,
    opts
  ) // 创建信息窗口对象 */
}

onMounted(() => {
  var wow = new WOW()
  wow.init()
  // console.log("controlVal",  nameVal,
  // phoneVal,
  // controlVal,)

  getData();
});


function submitForm(params) {
  // console.log(333);
  axios2.post(saveURL, {
    name: nameVal,
    phone: phoneVal,
    content: controlVal
  })
    .then(function (response) {
      console.log(response.data)
    })
    .catch(function (error) {
      console.log(error)
    })
  alert('提交成功')
  nameVal = ""
  phoneVal = ""
  controlVal = ""
}

// function submitForm() { }

// const submitForm = () => {
//   //文档地址 https://test.dingsing-medical.com/web/api/doc.html#/default/%E5%AE%98%E7%BD%91-%E7%95%99%E8%A8%80%E6%8E%A5%E5%8F%A3/saveUsingPOST_1
//   // 接口地址 https://test.dingsing-medical.com/web/api/leave/word/save

//   axios
//     .post(saveURL, {
//       name: nameVal,
//       phone: phoneVal,
//       content: controlVal
//     })
//     .then(function (response) {
//       console.log(response.data)
//     })
//     .catch(function (error) {
//       console.log(error)
//     })
//   alert('提交成功')
//   nameVal = ""
//   phoneVal = ""
//   controlVal = ""

// }




</script>

<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.ContactUs-container {
  padding: 80px 0;
  transition: all ease 0.5s;
  box-sizing: border-box;
}

#map {
  width: 100%;
  height: 365px;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

@media screen and (max-width: 997px) {
  .ContactUs-container {
    padding: 20px 0;
  }
}
</style>
